<template>
    <div>
        <input type="button" value="升序" @click="orderbyfanye('src')">
        <input type="button" value="降序" @click="orderbyfanye('dsrc')">
       <table>
        <thead>
            <tr>
                <td>房间名称【房号】</td>
                <td>价格</td>
                <td>是否有押金</td>
                <td>押金金额</td>
                <td>面积</td>
                <td>人数</td>
                <td>加床方式</td>
                <td>房间图片</td>
                <td>状态</td>
                <td>房间类型</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="a in list">
                <td>{{a.houseName}}</td>
                <td>{{a.price}}</td>
                <td>{{a.isDeposit}}</td>
                <td>{{a.deposit}}</td>
                <td>{{ a.area }}</td>
                <td>{{a.count}}</td>
                <td>{{a.extrabed}}</td>
                <td>
                    <img :src="'https://localhost:7242'+a.houseImg" style="width: 100px; height: 100px;" alt="">
                </td>
                <td>{{a.state}}</td>
                <td>{{a.tid}}</td>
                <td><input type="button" value="逻辑删除" @click="del(a.houseId)"></td>
                <td><input type="button" value="编辑" @click="upda(a.houseId)"></td>
                <td><a :href="'https://localhost:7242'+a.houseImg">点击看图</a></td>
            </tr>
        </tbody>
       </table>
       <input type="button" value="首页" @click="fanye(1)">
       <input type="button" value="上一页" @click="fanye(2)">
       <input type="button" value="下一页" @click="fanye(3)">
       <input type="button" value="尾页" @click="fanye(4)">

      共有{{listdate.pount}}页，共有{{listdate.count}}行，当前第{{date.index}}行，当前第{{date.size}}页
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from"vue";
import axios from "axios";
import { useRouter } from "vue-router";

const orderbyfanye=(val:any)=>{
    date.value.desc=val;
    Show();
}






const router=useRouter();
const upda=(houseId:any)=>{
    router.push({
        path:"/Enile",
        query:{hid:houseId},
    })
}





const del=(houseId:any)=>{
    if(!confirm('确认删除？')){
        return;
    }
        axios.get("https://localhost:7242/api/House/DeleteLj",{params:{hid:houseId}}).then(res=>{
       if(res.data>0){
        alert('逻辑删除成功');
        Show();
       }else{
        alert('逻辑删除失败');
       }
   })
    
  
}





onMounted(()=>{
    Show();
})
const fanye=(a:any)=>{
     if(a==1){
        date.value.index=1;
        Show();
     }
     if(a==2){
        if(date.value.index>1){
            date.value.index-=1;
            Show();
        }
     }
     if(a==3){
        if(date.value.index<listdate.value.pount){
            date.value.index+=1;
            Show();
        }
     }
     if(a==4){
        date.value.index=listdate.value.pount;
        Show();
     }
}


const list=ref([{
  "houseId": 0,
  "houseName": "string",
  "price": 0,
  "isDeposit": true,
  "deposit": 0,
  "area": 0,
  "count": 0,
  "extrabed": 0,
  "houseImg": "string",
  "state": true,
  "tid": 0
}])

const date=ref({
    index:1,
    size:2,
    desc:"src"
})
const listdate=ref({
    count:0,
    pount:0
})


const Show=()=>{
    debugger
     axios.get("https://localhost:7242/api/House/Get",{params:date.value}).then(res=>{
           list.value=res.data.data;
           listdate.value.count=res.data.count;
           listdate.value.pount=Math.ceil(res.data.count/date.value.size);
     })
}
</script>

<style scoped>

</style>